<template>
  <div class="reg-company">
    <base-header></base-header>
    <div class="company-register">
      <p class="busiss-text">企业注册</p>
      <el-form :model="companyNameForm" :rules="rules" ref="companyNameForm">
        <p class="creatP">创建一个新的企业</p>
        <el-form-item prop="name">
          <el-input v-model="companyNameForm.name" autocomplete="off" placeholder="请输入公司全称"></el-input>
        </el-form-item>
        <p class="bindA">绑定管理员账号</p>
        <el-form-item prop="phone">
          <el-input v-model="companyNameForm.phone" autocomplete="off" placeholder="请输入管理员手机号"></el-input>
        </el-form-item>
        <el-form-item prop="code">
            <el-input v-model="companyNameForm.code" placeholder="请输入短信验证码"></el-input>
            <el-button class="send-code" @click="sendCode" :disabled="forbidenClick">发送验证码</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('companyNameForm')" class="continer">完成</el-button>
        </el-form-item>
      </el-form>
    </div>
    <base-picture></base-picture>
    <base-footer></base-footer>
  </div>
</template>

<script>
import { quickLogin, sendCodeRequest } from 'api/index'
import { joinGroup } from 'api/UserController/UserController'
import BaseHeader from "@/components/base/header/Header";
import BaseFooter from "@/components/base/footer/Footer";
import BasePicture from '@/components/base/picture/Picture'
import { mapMutations } from 'vuex'
const DEVICE_CODE = "device00001111"
const DEVICE_TYPE = 3
const APP_ID = 'nng0031'
export default {
  name: "ComRegister",
  data() {
    //自定义手机号验证
    const checkPhone = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^[0-9]*$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    }
    // 验证验证码
    const checkCode = (rule, value, callback) => {
        if(value == "") {
            return callback(new Error("请输入验证码"));
        }else{
            const reg1 = /^[0-9]{6}$/
            if (!reg1.test(value)){
                return callback(new Error("验证码必须为6位数"))
            }else{
                callback();
            }
        }
    }
    return {
        companyNameForm: {
            name: '',
            phone: '',
            code: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入公司全称', trigger: 'change' }
          ],
          phone: [
            { validator: checkPhone, required: true, trigger: 'change' },
          ],
          code: [
            { required: true, validator: checkCode, trigger: 'change' }
          ]
        },
        forbidenClick: false
    };
  },
  components: {
    BaseHeader,
    BaseFooter,
    BasePicture
  },
  methods: {
    ...mapMutations([
        'saveUserInfo',
        'saveGroupInfo'
      ]),
      submitForm(companyNameForm){
          this.$refs[companyNameForm].validate((valid) => {
          if (valid) {
            var params = {
              phone: this.companyNameForm.phone,
              code: this.companyNameForm.code,
              deviceCode: DEVICE_CODE,
              deviceType: DEVICE_TYPE,
              appId: APP_ID 
            }
            quickLogin(params).then(res => {
              console.log(res)
              if(res.response_code == 0){
                this.saveUserInfo(res.result)
                var params = {
                  existGroupName: '',
                  newGroupName: this.companyNameForm.name
                } 
                var nngUid = res.result.user_id
                joinGroup(params, nngUid).then(res => {
                  console.log(res)
                  if(res.resultCode == 1){
                    this.saveGroupInfo(res.data)
                    this.$router.push({ name: 'Login' })
                  }
                })
              }else{
                this.$message.error(res.reason)
              }
            })
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      sendCode(){
        var params = {
          info: this.companyNameForm.phone,
          method: 'phone',
          areaCode: '86'
      }
      // console.log(params)
      sendCodeRequest(params).then(res => {
        console.log(res)
        if(res.response_code == 0){
          this.forbidenClick = true
            setTimeout(() => {
              this.forbidenClick = false
            }, 10000);
          }
        })
      },
  },
  computed: {

  }
};
</script>

<style lang="scss" scoped>  
@import "~@/assets/css/varible";
.reg-company {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background-color: #ffffff;
  .company-register {
    position: absolute;
    left: 83px;
    top: 50%;
    transform: translateY(-50%);
    .busiss-text {
      font-weight: bold;
      font-size: 16px;
      color: #666666;
    }
    .el-form{
      .creatP{
        margin-top: 36px;
        margin-bottom: 12px;
      }
      .bindA{
        margin-bottom: 12px;
      }
      .send-code{
        margin-left: 10px;
        background: #36C2CF;
        color: #ffffff;
      }
      .continer{
        width: 108px;
        background-color: #4065E0;
        color: #ffffff;
      }
    }
    
    
    
  }
}
</style>
